<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="/static/css/metro-all.min.css">
	<link rel="stylesheet" href="/static/css/schemes/darcula.min.css">
	<style>
	@media screen and (max-width: 800px) {
  table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}
	</style>
</head>
<body class="bg-dack m-0 p-2">
	<!--  -->
	<header class="grid">
		<div class="row mt-10">
			<div class="cell-12">
				<h4>分组编辑</h4>
			</div>
		</div>
	</header>
	<!--  -->
	<section>
		<article class="grid">
		<form data-role="validator" action="javascript:" data-on-validate-form="_submitForm">
			<div class="row">
				<div class="cell-12">
					<input type="hidden" id="id" name="id">
					<input type="text" data-role="input" id="name" placeholder="用户组标题" name="name"  
						data-prepend="<span class='mif-bookmark'></span>"
						data-clear-button="false"
						data-validate="required minlength=2 maxlength=24">
					<span class="invalid_feedback text-left">
					必填 5到24个字符
					</span>
				</div>
			</div>
			<div class="row mt-2">
				<div class="cell-12">
					<div class="border border-size-1" style="border-color:#585b5d;">
						<span class='mif-switch mr-2' style="display:block; float:left;background-color:#585b5d;padding:6px 12px 7px 12px;"></span>
						<input type="radio" name="switch" data-role="radio" value="0" data-validate="required" data-caption="开启分组">
						<input type="radio" name="switch" data-role="radio" value="1" data-validate="required" data-caption="禁用分组">
						<span class="invalid_feedback">显示状态不能为空</span>
					</div>
				</div>
			</div>
			<div class="row mt-2">
				<div class="cell-12">
					<textarea data-role="textarea" id="introduce" data-auto-size="false"  placeholder="对新权限进行一定的描述" data-prepend="<span class='mif-leanpub'></span>" data-chars-counter="#chars-counter" data-chars-counter-template="您已经输入了 $1 个字符" data-validate="required minlength=2 maxlength=255" style="height:96px;outline:none;" name="introduce"></textarea>
					<span class="invalid_feedback text-left">
					必填 2到255个字符
					</span>
					<p id="chars-counter"></p>
				</div>
			</div>
			<div class="row mt-2">
				<div class="cell-6">
					<button class="button w-100">保存</button>
				</div>
				<div class="cell-6">
					<a class="button w-100" id="click" onclick="delRules()">删除</a>
				</div>
			</div>
			<div class="row mt-2">
				<div class="cell-12 text-left">
					<h5>规则列表</h5>
					<ul data-role="treeview" id="tree" class="p-0"></ul>
				</div>
			</div>
			<div class="row mt-2">
				<div class="cell-12">
					<a class="button w-100">重置所有权限</a>
				</div>
			</div>
		</form>
		</article>
	</section>
	<!--  -->
	<footer class="grid text-center">
		
	</footer>
</body>
<foot>
	<script src="/static/js/jquery-3.3.1.min.js"></script>
	<script src="/static/js/metro.js"></script>
	<script>

	function getDetails()
	{
		list = Metro.storage.getItem('group_detauls');
		console.log(list);
		Metro.toast.create('获取中', function()
		{
			$('#id').val(list.id); 
			$('#name').val(list.title); 
			if ("1"== list.status) $("input[value='1']").attr('checked','true');
			else $("input[value='0']").attr('checked','true');
			$('#introduce').val(list.note);
			$('#click').attr('onclick','delRules('+list.id+')');
			_rulesshow(list.rules)
		},1000);
	}
	getDetails();

	function _rulesshow(rules)
	{
		var url = 'http://www.dreamcc.com/admin/admin_group/ruleGroup.html';
		$.post(url,'',function(res)
		{
			if (res.code == 0)
			{
				data = treeDataProcessing(res.data);
				$("#tree").html(data);
				Metro.toast.create('加载中', function(){checkBoxAdd(rules);},2000); 
			} else {
				Metro.toast.create(res.msg, null,3000); 
			}
		});
	}

	function checkBoxAdd(rules)
	{
		var servicesArray = rules.split(",");
		$('input:checkbox').each(function (i, e)
		{
			for (var i = 0; i < servicesArray.length; i++)
			{
				if ($(this).val() == servicesArray[i]) { $(this).prop("checked",true); }
			}
		});
	}
	function treeDataProcessing(res,pid=0)
	{
		str = '';
		for (var i = 0; i < res.length; i++)
		{
			if (pid === 0 && res[i].pid == pid)
			{
				str += '<hr>';
				str += '<li class="clear mb-3 mt-3" data-cls-hint="drop-shadow" data-role="hint" data-hint-text="'+res[i].note+'">';
				str += '<input type="checkbox" data-role="checkbox" data-caption="<h6 class=mt-2>'+res[i].title+'<h6>" name=rules[] value="'+res[i].id+'">';
				str += '<ul class="m-0 mt-3">';
				if (res[i].pid === pid) { if(res[i].pid ==0) str += treeDataProcessing(res,res[i].id); }
				str += '</ul>';
				str += '</li>';
			}
			else if(pid !== 0  && res[i].pid ==pid)
			{
				if (res[i].level == 2)
				{
					str += '<li class="float-left" data-cls-hint="drop-shadow" data-role="hint" data-hint-text="'+res[i].note+'" >';
					str += '<input type="checkbox" data-role="checkbox" data-caption="'+res[i].title+'" title="" name=rules[] value="'+res[i].id+'">';
					str += '<ul class="m-0 mt-3">';
					str += treeDataProcessing(res,res[i].id);
					str += '</ul>';
					str += '</li>';
				}
				if (res[i].level > 2)
				{
					str += '<li class="ml-7 pl-7" data-cls-hint="drop-shadow" data-role="hint" data-hint-text="'+res[i].note+'">';
					str += '<input type="checkbox" data-role="checkbox" data-caption="'+res[i].title+'" title="" name=rules[] value="'+res[i].id+'">';
					str += '<ul class="mt-3">';
					str += treeDataProcessing(res,res[i].id);
					str += '</ul>';
					str += '</li>';
				}
			}

		}
		return str;
	}

	function _submitForm()
	{
		var url = 'http://www.dreamcc.com/admin/admin_group/editGroup.html';
		var data = $("form").serializeArray();
		$.post(url,data,function(res)
		{
			if (0 === res.code) Metro.toast.create('修改成功',null,3000);
			else Metro.toast.create('修改失败', null,3000);
		});
	}

	function delRules(id)
	{
		var url = 'http://www.dreamcc.com/admin/admin_group/delGroup.html';
		$.post(url,{id:id},function(res)
		{
			console.log(res);
			if (0 === res.code) Metro.toast.create('删除成功',function(){
				window.location.href = 'http://www.dreamcc.com/admin/admin_group/list';
			},2000);
			else Metro.toast.create(res.msg, null,3000);
		});
	}
	
	</script>
</foot>
</html>

